<template>
  <div class="form-render-container">
    <div class="toolbar">
      <el-button type="primary" size="small" @click="submitForm"
        >提交表单</el-button
      >
      <el-button type="success" size="small" @click="getFormData"
        >获取表单数据</el-button
      >
      <el-button size="small" @click="resetForm">重置表单</el-button>
    </div>

    <div class="render-wrapper">
      <el-card v-if="!formJsonData" shadow="never">
        <div class="empty-state">
          <i class="el-icon-warning" style="font-size: 48px; color: #999"></i>
          <p>请先在表单设计器中设计表单并保存</p>
        </div>
      </el-card>

      <v-form-render
        v-else
        ref="vFormRender"
        :form-json="formJsonData"
        :form-data="formData"
        :option-data="optionData"
      >
      </v-form-render>
    </div>
  </div>
</template>

<script>
export default {
  name: "FormRender",
  props: {
    formJson: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      formJsonData: null,
      formData: {},
      optionData: {},
    };
  },
  watch: {
    formJson: {
      handler(val) {
        if (val) {
          this.formJsonData = val;
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 提交表单
    submitForm() {
      this.$refs.vFormRender
        .getFormData()
        .then((formData) => {
          console.log("表单数据:", formData);
          this.$message.success("表单提交成功！数据已输出到控制台");
        })
        .catch((error) => {
          console.error("表单验证失败:", error);
          this.$message.error("表单验证失败，请检查必填项");
        });
    },

    // 获取表单数据
    getFormData() {
      this.$refs.vFormRender
        .getFormData()
        .then((formData) => {
          console.log("表单数据:", JSON.stringify(formData, null, 2));
          this.$alert(
            `<pre style="max-height: 400px; overflow: auto">${JSON.stringify(
              formData,
              null,
              2
            )}</pre>`,
            "表单数据",
            {
              dangerouslyUseHTMLString: true,
              confirmButtonText: "确定",
            }
          );
        })
        .catch((error) => {
          console.error("获取表单数据失败:", error);
          this.$message.error("表单验证失败");
        });
    },

    // 重置表单
    resetForm() {
      this.$refs.vFormRender.resetForm();
      this.$message.info("表单已重置");
    },

    // 加载表单JSON
    loadFormJson() {
      const savedForm = localStorage.getItem("vform-design");
      if (savedForm) {
        try {
          this.formJsonData = JSON.parse(savedForm);
        } catch (e) {
          console.error("加载表单失败:", e);
        }
      }
    },
  },
  mounted() {
    // 如果没有传入formJson，从localStorage加载
    if (!this.formJson) {
      this.loadFormJson();
    }
  },
};
</script>

<style scoped>
.form-render-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

.toolbar {
  padding: 15px 20px;
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
}

.render-wrapper {
  flex: 1;
  padding: 20px;
  overflow: auto;
}

.empty-state {
  text-align: center;
  padding: 60px 0;
  color: #999;
}

.empty-state p {
  margin-top: 16px;
  font-size: 14px;
}
</style>
